<script setup>
import {ref, reactive} from "vue"
import {View} from "@element-plus/icons-vue"
import QA01 from "@/assets/qa-01.ce8702ee.svg"
import QA02 from "@/assets/qa-02.c181fcd6.svg"
const ruleForm = reactive({})
const ruleFormRef = ref()
const rules = {

}
</script>

<template>
  <el-container style="height: 100%">
    <el-aside width="600px" style="border-right: 1px solid #eee; padding: 20px">
      <div style="margin: 40px 0">
        <h1 style="font-size: 24px">配置</h1>
        <p>在这里更新您的知识库详细信息，尤其是解析方法。</p>
      </div>
      <el-divider></el-divider>
      <div>
        <el-form
            ref="ruleFormRef"
            style="max-width: 900px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            label-position="top"
            inline
            class="demo-ruleForm"
            status-icon>
          <el-form-item label="知识库名称" prop="name" style="width: 40%">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="知识库图片" prop="name" style="width: 40%">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="name" style="width: 40%">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="文档语言" prop="name" style="width: 40%">
            <el-select placeholder="请选择">
              <el-option label="中文"></el-option>
              <el-option label="英文"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文档解析器" prop="name" style="width: 40%">
            <el-select  placeholder="请选择">
              <el-option label="DeepDoc"></el-option>
              <el-option label="简易"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="嵌入模型" prop="name" style="width: 40%">
            <el-select  placeholder="请选择">
              <el-option label="BCE"></el-option>
              <el-option label="text2vec"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="解析方法" prop="name" style="width: 40%">
            <el-select  placeholder="请选择">
              <el-option label="General"></el-option>
              <el-option label="Q&A"></el-option>
              <el-option label="Resume"></el-option>
              <el-option label="Manual"></el-option>
              <el-option label="Table"></el-option>
              <el-option label="Book"></el-option>
              <el-option label="Law"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="块token数" prop="name" style="width: 40%">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="分段标识符" prop="name" style="width: 40%">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="自动排名" prop="name" style="width: 40%">
            <el-slider></el-slider>
          </el-form-item>
          <el-form-item label="自动关键字" prop="name" style="width: 40%">
            <el-slider></el-slider>
          </el-form-item>
          <el-form-item label="自动问题" prop="name" style="width: 40%">
            <el-slider></el-slider>
          </el-form-item>
          <el-form-item label="使用召回增强RAPTOR策略" prop="name" style="width: 40%">
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="使用召回增强RAPTOR策略" prop="name" style="width: 40%">
            <el-switch></el-switch>
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button>取消</el-button>
          <el-button type="primary">保存</el-button>
        </div>
      </div>
    </el-aside>
    <el-main>
      <div style="line-height: 30px">
        <h1 style="font-size: 24px">"Q&A" 分块方法说明</h1>
        此块方法支持 excel 和 csv/txt 文件格式。
        <ul style="padding-left: 20px">
          <li> 如果文件是 excel 格式，则应由两个列组成 没有标题：一个提出问题，另一个用于答案， 答案列之前的问题列。多张纸是 只要列正确结构，就可以接受。</li>
          <li> 如果文件是 csv/txt 格式 以 UTF-8 编码且用 TAB 作分开问题和答案的定界符。</li>
        </ul>

        未能遵循上述规则的文本行将被忽略，并且 每个问答对将被认为是一个独特的部分。

        <h1 style="font-size: 24px">"Q&A" 示例</h1>
        提出以下屏幕截图以促进理解。
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <img :src="QA01" alt="" style="width: 100%">
          </div>
          <div style="width: 50%">
            <img :src="QA02" alt="" style="width: 100%">
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>

</style>